<template>
	<top ref="topModel"></top>
	<div class="container" @click="containerClick">
		
		<div style="position: relative;height: 2.5em;"></div>
		
		<div style="position: relative;">
			
		</div>
		<div style="position: relative;">
			<div class="loginFrame">
				<div style="display: flex;justify-items: center;">
					<div style="width: 49%;">
						<uni-data-select
						      :localdata="range"
						    ></uni-data-select>
					</div>
					<div style="width: 2%;"></div>
					<div style="width: 49%;">
						<uni-data-select
						      :localdata="range"
						    ></uni-data-select>
					</div>
				</div>
				<div>
					<div style="margin-top: 0.5em;"><uni-easyinput type="text"  placeholder="请输入关键词" /></div>
					<div style="margin-top: 0.7em;"><button style="background-color: #5D5D5D;color: #fff;height:1.8em;line-height: 1.7em;">点击登录</button></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import api from '@/static/request.js'
	export default {
		components: {
			top
		},
		data() {
			return {
				range: [
				        { value: 0, text: "篮球" },
				        { value: 1, text: "足球" },
				        { value: 2, text: "游泳" },
				],
			}
		},
		onLoad() {
			
		},
		mounted() {
			
		},
		methods: {
			containerClick(){
				this.$refs.topModel.show = false;
			}
		}
	}
</script>

<style>
	.container {
		background-color: #000;
		width: 100%;
		height: 100vh;
	}
	.loginFrame{
		margin-left: 0.2em;
		margin-right: 0.2em;
		background-color: #fff;
		border-radius : 10px;
		height: 14em;
		padding:0.8em;
	}
	.clear{
		clear: both;
	}
</style>
